<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS动画</title>
    <style>
        /*div{*/
            /*margin: 1em 0;*/
        /*}*/
        p{
            white-space: pre-wrap;
        }

        /*transition */
        #img1:hover{
            width: 300px;
            height: 300px;
        }
        #img1{
            /*width先1秒内变化,再设置delay2秒 //后一个时间才是delay
                语法是先持续时间,后delay
            */
            transition: 1s height, 1s 1s width;
            /*transition: 1s ease;*/
        }
        #rainbow{
            box-sizing: border-box;
            border: 1px solid;
            width: 100px;
            height: 100px;
        }

        #rainbow:hover{
            /*简写*/
            /*animation: 1s 1s rainbow linear 3 forwards normal;*/

            /*完整写法*/
            animation-name: rainbow;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-fill-mode:forwards;
            animation-direction: normal;
            animation-iteration-count: 3;

            /*可无限次 infinite; 交替的*/
            -webkit-animation: rainbow 1s linear infinite alternate ;
            /*停留在最后一帧*/
            -webkit-animation-fill-mode: forwards;
        }

        @-webkit-keyframes rainbow {
            0% { background: #c00; }
            25% { background: orange; }
            75% { background: yellowgreen; }
            100% { background: lightblue; }
        }

        @keyframes rainbow {
            0% { background: #c00; }
            50% { background: orange; }
            100% { background: yellowgreen; }
        }

        #small-ball-container{
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-around;
            justify-content: space-around;
            -webkit-align-items: center;
            align-items: center;
            border: 1px solid mediumvioletred;
            margin: 1em 0;
            width: 150px;
            height: 100px;
            background: mediumvioletred;
        }
        .small-ball{
            display: inline-block;
            border-radius: 99%;
            background: #fff;
        }

        @-webkit-keyframes small-ball {
            33.33%{
                border: 1px solid #fff;
                width: 15px;
                height: 15px;
            }
            66.66%{
                border: 1px solid #fff;
                width: 15px;
                height: 15px;
                /*border: 0;*/
                /*width: 0;*/
                /*height: 0;*/
            }
            to{
                border: 0;
                width: 0;
                height: 0;
            }
        }

        @keyframes small-ball {
            to{
                border: 1px solid #fff;
                width: 15px;
                height: 15px;
            }
        }


        #rotate{
            position: fixed;
            left: 60%;
            top: 50%;
            margin: 1em 0;
            width: 200px;
            height: 15px;
            border: 1px solid yellowgreen;
            background: yellowgreen;
            -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
            /*animation-play-state: paused;*/
            /*-webkit-animation-play-state: paused;*/
        }

        #rotate:hover{
            /*-webkit-animation-play-state: running;*/
            /*animation-play-state: running;*/
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }

        @keyframes spin {
            to{transform: rotate(2turn);}
        }
        @-webkit-keyframes spin {
            to{-webkit-transform: rotate(2turn);}
        }


        #progress{
            width: 50%;
            height: 30px;
            border:1px solid #ccc;
            border-radius: 15px;
            margin: 50px 0 ;
            overflow: hidden;
            box-shadow: 0 0 5px 0px #ddd inset;
        }
        #progress span {
            display: inline-block;
            height: 100%;
            background: #2989d8; /* Old browsers */
            /*background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /!* FF3.6+ *!/*/
            background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */
            /*background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /!* Opera 11.10+ *!/*/
            /*background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /!* IE10+ *!/*/
            background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
            /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /!* IE6-9 fallback on horizontal gradient *!/*/
            background-size: 60px 30px;
            text-align: center;
            color:#fff;
            -webkit-animation: simple-loading 3s ease-in infinite;
            animation: simple-loading 3s ease-in infinite;
        }

        @keyframes simple-loading {
            to{width: 100%;}
            from{width: 0%;}
        }
        @-webkit-keyframes simple-loading {
            to{width: 100%;}
            from{width: 0%;}
        }


        #dot-and-line{
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            width: 50%;
        }
        #dot-and-line div{
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-flex: 1;
        }
        /* dot 不用使用margin,只要line取消border */
        #dot-and-line div span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 99%;
            background: #ccc;
            margin: 0 -1px;
            z-index: 2;
        }
        /*本来想用after,哦!应该用div的after!!!*/
        /*#dot-and-line div span::after{*/
            /*-webkit-flex: 1;*/
            /*flex:1;*/
            /*display: block;*/
            /*height: 10px;*/
            /*border: 1px solid #ccc;*/
            /*background: #ccc;*/
        /*}*/

        /* line */
        #dot-and-line div p{
            -webkit-flex: 1;
            flex:1;
            height: 5px;
            background: #ccc;
        }
        #dot-and-line div p::after{
            content: '';
            display: block;
            width: 0;
            height: 100%;
            background: green;
        }
        /*不懂如何在css里控制伪元素,只好写css了*/
        #dot-and-line div:first-child p::after{
            -webkit-animation: 1s .5s line-load ease-in forwards;
            animation: 1s 5s line-load ease-in forwards;
        }
        #dot-and-line div:nth-child(2) p::after{
            -webkit-animation: 1s 2s line-load ease-in forwards;
            animation: 1s 2s line-load ease-in forwards;
        }
        #dot-and-line div:nth-child(3) p::after{
            -webkit-animation: 1s 3.5s line-load ease-in forwards;
            animation: 1s 3.5s line-load ease-in forwards;
        }
        #dot-and-line div:nth-child(4) p::after{
            -webkit-animation: 1s 5s line-load ease-in forwards;
            animation: 1s 5s line-load ease-in forwards;
        }
        /*#dot-and-line div:last-child p::after{*/
            /*-webkit-animation: 1s 1s line-load ease-in forwards;*/
            /*animation: 1s 1s line-load ease-in forwards;*/
        /*}*/


        @-webkit-keyframes span-load {
            to{
                background: green;
            }
        }
        @keyframes span-load {
            to{background: green;}
        }

        @-webkit-keyframes line-load {
            to{width:100%;}
        }
        @keyframes line-load {
            to{width:100%;}
        }


        #circle-container{
            width: 50%;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }

        #circle{
            margin: 1em 0;
            width: 200px;
            height: 200px;
            border: 10px solid ;
            border-radius: 50%;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-animation: 4s circle-change-color ease-in infinite;
            animation: 4s circle-load ease-in infinite;
        }

        @-webkit-keyframes circle-change-color{
            /*from{*/
            /*border: 10px solid transparent;*/
            /*}*/
            25%{border-top:10px solid red;}
            50%{
                border-top:10px solid red;
                border-right: 10px solid red;
            }
            75%{
                border-top:10px solid red;
                border-right: 10px solid red;
                border-bottom: 10px solid red;
            }
            100%{border: 10px solid red;}
        }
        @keyframes circle-change-color{
            /*from{*/
                /*border: 10px solid transparent;*/
            /*}*/
            25%{border-top:10px solid red;}
            50%{
                border-top:10px solid red;
                border-right: 10px solid red;
            }
            75%{
                border-top:10px solid red;
                border-right: 10px solid red;
                border-bottom: 10px solid red;
            }
            100%{border: 10px solid red;}
        }

/*
        iphone5, ipad 3 适配:
            @media screen and (max-width: 320px) {
                width: 1.5rem;
                height: 1.5rem;
            }

            @media screen and (min-width: 1024px){
                top: .19rem;
            }
*/

        #circleProgress{
            width: 200px;
            height: 200px;
            position: relative;
            border:1px solid  transparent;
        }
        .wrapper{
            margin: 0 1px;
            width: 100px;
            height: 200px;
            position: absolute;
            top:0;
            /*这个很重要*/
            overflow: hidden;
        }
        .right{
            right:0;
        }
        .left{
            left:0;
        }
        .progress{
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            border:10px solid transparent;
            border-radius: 50%;
            position: absolute;
            top:0;

        }

        .right-circle{
            border-bottom:10px solid green;
            border-left:10px solid green;
            right:0;
            -webkit-animation: 4s right-circle-run linear forwards infinite;
            animation: 2s right-circle-run linear infinite;
        }
        .left-circle{
            border-top:10px solid green;
            border-right:10px solid green;
            left:0;
            -webkit-animation: 4s left-circle-run linear forwards infinite;
            animation: 4s left-circle-run linear infinite;
        }
        @-webkit-keyframes right-circle-run {
            from{
                -webkit-transform: rotate(45deg);
            }
            50%{
                -webkit-transform: rotate(225deg)
            }
            to{
                -webkit-transform: rotate(225deg)
            }
        }
        @keyframes right-circle-run {
            from{
                transform: rotate(45deg);
            }
            50%{
                -webkit-transform: rotate(225deg)
            }
            to{
                transform: rotate(.5turn);
            }
        }

        @-webkit-keyframes left-circle-run {
            from{
                -webkit-transform: rotate(45deg);
            }
            50%{
                -webkit-transform: rotate(45deg);
            }
            to{
                -webkit-transform: rotate(225deg)
            }
        }
        @keyframes left-circle-run {
            from{
                transform: rotate(45deg);
            }
            50%{
                -webkit-transform: rotate(45deg);
            }
            to{
                transform: rotate(.5turn);
            }
        }

    </style>
</head>
<body>
    <section id="transition">
        <img id="img1" width="100px" height="100px" src="../public/images/qrcode.jpg" alt="qr code"/>

        <div id="rainbow"></div>
        <div id="small-ball-container">
            <span class="small-ball"></span>
            <span class="small-ball"></span>
            <span class="small-ball"></span>
        </div>

        <div id="rotate"></div>

        <div id="progress">
            <span></span>
        </div>

        <div id="dot-and-line">
            <div>
                <span></span>
                <p></p>
            </div>
            <div>
                <span></span>
                <p></p>
            </div>
            <div>
                <span></span>
                <p></p>
            </div>
            <div>
                <span></span>
                <p></p>
            </div>
            <div>
                <span></span>
                <!--<p></p>-->
            </div>
        </div>

        <div id="circle-container">
            <div id="circle"> </div>

            <div id="circleProgress">
                <div class="wrapper right">
                    <div class="progress right-circle"></div>
                </div>
                <div class="wrapper left">
                    <div class="progress left-circle"></div>
                </div>
            </div>
        </div>
    </section>
    <article>
        <p>
            完整的写法:
            transition-property: height;
            transition-duration: 1s;
            transition-span_delay: 1s;
            transition-timing-function: ease;/*默认逐渐放慢*/
            ease-in 加速; ease-out 减速; linear:匀速; cubic-bezier:自定义速度
            from 是开始; to 是结束,如果某些状态省略,浏览器会自动推算
        </p>
        <p>
            （1）目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
            （2）不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。
            （3）transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，
                transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，
                如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有:
                display: none到block，background: url(foo.jpg)到url(bar.jpg)等等
        </p>
        <p>
            transition的优点在于简单易用，但是它有几个很大的局限。
           （1）transition需要事件触发，所以没法在网页加载时自动发生。
           （2）transition是一次性的，不能重复发生，除非一再触发。
           （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
           （4）一条完整的transition规则，只能定义一个属性的变化，不能涉及多个属性。
            CSS Animation就是为了解决这些问题而提出的。
        </p>
    </article>
    <script>
        var log = function(msg){
            console.log(msg);
        }

//        不想写几乎重复的css动画设置,故用js操作css
//        但js是无法选择伪元素的,想用js改变,只能自己创建一个stylesheet,再insertRule,
//         反而更麻烦,所以还是老老实实地用css写吧
        window.onload = function(){
            var dot_and_line = document.getElementById('dot-and-line');
            if(!dot_and_line) return;

            var dots = dot_and_line.getElementsByTagName('span');
            for(var i = 0; i < dots.length; i++){
//                var delay = i == 0 ? i + .5 : i * 2 + .5;
                var delay = i == 0 ? 0 : i * 1.5;
                    delay += 's';
//                log(delay)

                var text = '-webkit-animation: 1s ' + delay + ' span-load forwards '
                        + ' ; animation: 1s '+ delay + ' span-load  forwards' ;
                dots[i].style.cssText = text;
            }

            //返回数组,要使用这个!
            var balls = document.querySelectorAll('.small-ball');
            for(var i = 0; i < balls.length; i++){
                var delay = i / 10 + 's';
//                log(delay)
                balls[i].style.cssText = '-webkit-animation: .8s ' + delay + ' small-ball infinite;'
                        + ' animation: .8s ' + delay + ' small-ball infinite';
            }

        };
    </script>
</body>
</html>